/**
  * 功能描述: 基础数字输入框demo
  * @author 崔孝楠
  * @date 2022/9/20 17:31
  * @version 1.0
  */
<template>
  <div class="yw-input-number" id="input-number-div">
    <!-- 上下按钮 -->
    <div class="yw-input-number-handler-wrap">
      <span class="yw-input-number-handler yw-input-number-handler-up">
        <span class="yw-input-number-handler-up-inner"></span>
      </span>
      <span class="yw-input-number-handler yw-input-number-handler-down">
        <span class="yw-input-number-handler-down-inner"></span>
      </span>
    </div>
    <!-- 输入框 -->
    <div class="yw-input-number-input-wrap">
      <input class="yw-input-number-input" placeholder="numberInput" @focus="addDivFocused()" @blur="removeDivFocused()" />
    </div>
  </div>

</template>

<script>
export default {
  name: "index",
  methods: {
    /**
     * 添加选中时样式
     */
    addDivFocused() {
      let inputNumberDiv = document.getElementById('input-number-div')
      inputNumberDiv.classList.add('yw-input-number-focused')
    },
    /**
     * 移除选中时样式
     */
    removeDivFocused() {
      let inputNumberDiv = document.getElementById('input-number-div')
      inputNumberDiv.classList.remove('yw-input-number-focused')
    }
  }
}
</script>

